<template>
  <page class="dashboard-container">
     <TitleBar
      title="平台信息"
      refresh
    />
    <panel class="quyu">
      <div class="top">
        设置编辑
      </div>
      <div class="set">
        <el-form
          ref="form"
          :label-position="labelPosition"
          :rules="xinForm"
          :model="form"
          label-width="120px"
        >
          <el-form-item prop="name" :required="true" label="平台名称:">
            <el-input v-model="form.name" this.a="false" />
          </el-form-item>
          <el-form-item prop="title" :required="true" label="平台标题:">
            <el-input v-model="form.title" this.b="false" />
          </el-form-item>
          <el-form-item prop="describe" :required="true" label="平台描述:">
            <el-input v-model="form.describe" />
          </el-form-item>
          <el-form-item prop="antistop" :required="true" label="关键词:">
            <el-input v-model="form.antistop"  />
          </el-form-item>
          <el-form-item :required="true" label="平台LOGO:">
            <div class="mi">
              <el-upload
                class="avatar-uploader"
                :action="uploadUrl"
                :data="token"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <el-button
                  style="
                background-color: #FFF;
                color:#ccc;
                text-aling:left;
                border : 1px solid #ccc;
            "
                  size="small"
                  type="primary"
                >上传附件</el-button>
              </el-upload>
            </div>
            <p>只能上传jpg/png格式文件，文件不能超过20kb</p>
          </el-form-item>
          <el-form-item prop="heatRay" :required="true" label="客服热线:">
            <el-input v-model="form.heatRay"  />
          </el-form-item>
          <el-form-item prop="email" :required="true" label="客服邮箱:">
            <el-input v-model="form.email"  />
          </el-form-item>
          <el-form-item prop="sort" :required="true" label="描述">
            <el-input type="textarea" rows="5" v-model="form.sort" placeholder="请输入内容" />
            <p class="shi">该消息将在APP用户中心欢迎页面和后台首页显示</p>
          </el-form-item>

        </el-form>
      </div>
    </panel>
    <div class="ac clearfix" style="padding-top: 40px; padding-bottom: 30px;">
      <el-button type="primary" class="btn" @click="addInsert">保存</el-button>
    </div>
    <div class="ac clearfix" style="padding-top: 40px; padding-bottom: 30px;">
    </div>

  </page>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  getMessage,
  getInsert,
  delectWe,
  getImg
} from '../../../api/setting.js'
import { constants } from 'crypto'
import config from '@/settings'
export default {
  name: 'Dashboard',
  data() {
    return {
      uploadUrl: config.uploadUrl,
      fileList: [],
      Newsurl: '',
      token: {
        type: '6',
        whether: false
      },
      labelPosition: 'left',
      xinList: [],
      form: {
        name: '',
        title: '',
        describe: '',
        antistop: '',
        logo: '9978',
        heatRay: '',
        email: '',
        sort: '',
        code: '1562',
        status: 1,
        logoName: '',
        size: ''
      },
      xinForm: {
        name: [
          { required: true, message: '请输入平台名称', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^[\u4e00-\u9fa5]{4,30}$/.test(value) == false) {
                callback(new Error('平台名称由4-30位中文组成'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        title: [
          { required: true, message: '请输入平台标题', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^[\u4e00-\u9fa5]{4,30}$/.test(value) == false) {
                callback(new Error('平台标题由4-30位中文组成'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        describe: [
          { required: true, message: '请输入描述', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^[\u4e00-\u9fa5]{4,60}$/.test(value) == false) {
                callback(new Error('描述由4-60位中文组成'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        antistop: [
          { required: true, message: '请输入关键词', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^[\u4e00-\u9fa5]{2,30}$/.test(value) == false) {
                callback(new Error('关键词由2-30位中文组成'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        heatRay: [
          { required: true, message: '请输入客服热线', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(value) == false) {
                callback(new Error('客服热线由7-14数字-组成'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (
                /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(
                  value
                ) == false
              ) {
                callback(new Error('邮箱数字字母组成'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        sort: [
          { required: true, message: '请输入内容', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^[\u4e00-\u9fa5]{2,60}$/.test(value) == false) {
                callback(new Error('内容由2-60位中文组成'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.getInsertList()
  },
  methods: {
    // 文件上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.Newsurl = res.data.Url
      if(this.Newsurl!=''){
        this.$message({
          message: '图片上传成功！',
          type: 'success'
        });
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 0.2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 200KB!')
        
      }
      return isJPG && isLt2M
    },
    addInsert() {
      if (
        this.form.name != '' &&
        this.form.title != '' &&
        this.form.describe != '' &&
        this.form.antistop != '' &&
        this.form.heatRay != '' &&
        this.form.title != '' &&
        this.form.email != ''
      ) {
        if(this.form.sort==null){
          this.$message({
          message: '请填写描述！',
          type: 'warning'
        });
        }
        // 数据部门
        getMessage({
          platformCode: this.form.code,
          platformName: this.form.name,
          platformTitle: this.form.title,
          platformDescrible: this.form.describe,
          keyword: this.form.antistop,
          platformLog: this.Newsurl,
          // 文件传输
          hotline: this.form.heatRay,
          customerServiceEmail: this.form.email,
          store: this.form.sort,
          status: this.form.status
        }).then(res => {
          if (res.code === 200) {
            this.$message({
              showClose: true,
              message: '数据保存成功！将跳转回首页',
              type: 'success'
            })
            this.$router.replace('/home')
          } else {
            this.$message({
              showClose: true,
              message: '数据格式有误！将跳转回当前页面！',
              type: 'error'
            })
            this.$router.replace('/InformationPlatform')
          }
        })
      } else {
        this.$message({
          message: '请填写信息！',
          type: 'warning'
        });
      }
    },
    // 信息获取
    getInsertList() {
      getInsert().then(res => {
        res.data.forEach((item, index) => {
          this.form.code = item.platformCode
          this.form.name = item.platformName
          this.form.title = item.platformTitle
          this.form.describe = item.platformDescrible
          this.form.antistop = item.keyword
          this.form.logo = item.platformLog
          this.form.heatRay = item.hotline
          this.form.email = item.customerServiceEmail
          this.form.sort = item.store
          this.form.status = item.status
        })
      })
    },
    // 信息删除
    delInsert() {
      delectWe({
        code: '904a704b62614605be0e4f1cd0001d6b'
      }).then(res => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.quyu{
  .top{
height:50px;
line-height: 50px;
font-size:14px;
font-family:PingFang SC;
font-weight:bold;
color:rgba(51,51,51,1);
  }
}
p {
  color:#CCC;
}
.el-input,.el-textarea {
  width: 528px;
}
.btn {
  width:106px;
  height:40px;
  background:rgba(72,141,255,1);
  border-radius:4px;
}
</style>
